<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>聚车拍管理系统</title>
		<link rel="stylesheet" href="assets/layui/css/layui.css">
		<link rel="stylesheet" href="assets/css/all.css">
		<style>
			.layui-body .layui-tab{
				position:relative;
				height:100%;
			}
			.layui-body .layui-tab .layui-tab-content{
				width: 100%;
			    padding: 0px;
			    margin: 0px;
			    position: absolute;
			    top: 51px;
			    left: 0px;
			    bottom: 0px;
			    overflow: hidden;
			}
			.layui-body .layui-tab .layui-tab-content .layui-tab-item{
				width: 100%;
			    margin: 0px;
			    padding: 0px;
			    position: absolute;
			    top: 0px;
			    left: 0px;
			    bottom: 0px;
			    right: 0px;
			    overflow-y: scroll;
			}
			.layui-nav-bar{
				background-color:#FF5722
			}
		</style>
	</head>

	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">聚车拍管理系统</div>
				<div class="layui-layout-left" style="margin-top:22px; font-size:16px; color:#FFF;" id="navSorH"><i class="layui-icon">&#xe65a;</i></div>
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<!--<ul class="layui-nav layui-layout-left">
			      <li class="layui-nav-item"><a href="">控制台</a></li>
			      <li class="layui-nav-item"><a href="">商品管理</a></li>
			      <li class="layui-nav-item"><a href="">用户</a></li>
			      <li class="layui-nav-item">
			        <a href="javascript:;">其它系统</a>
			        <dl class="layui-nav-child">
			          <dd><a href="">邮件管理</a></dd>
			          <dd><a href="">消息管理</a></dd>
			          <dd><a href="">授权管理</a></dd>
			        </dl>
			      </li>
			    </ul>-->
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<i style="padding-right:5px;font-size:24px" class="layui-icon">&#xe612;</i>管理员
						</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;" id="changepsw">修改密码</a>
							</dd>
						</dl>
					</li>
					<li id="quit-btn" class="layui-nav-item">
						<a href="javascript:;"><i class="layui-icon">&#x1007;</i>退出</a>
					</li>
				</ul>
			</div>
			<div class="layui-side">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="left-nav">
						<li class="layui-nav-item ">
							<a class="title" href="javascript:;"><i class="layui-icon">&#xe7a0;</i>人力资源部</a>
							<dl class="layui-nav-child">
								<dd id="A001" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>人员管理</a>
								</dd>
								<dd id="A002" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>员工档案</a>
								</dd>
								<dd id="A003" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>招聘管理</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="title" href="javascript:;"><i class="layui-icon">&#xe7a0;</i>车辆管理部</a>
							<dl class="layui-nav-child">
								<dd id="B001" name="addCarIndex.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>发布车辆</a>
								</dd>
								<dd id="B002" name="offerCar.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>报价管理</a>
								</dd>
								<dd id="B003" name="carManage.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>车辆管理</a>
								</dd>
								<dd id="B004" name="sellHistory.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>历史记录</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="title" href="javascript:;"><i class="layui-icon">&#xe7a0;</i>运营部</a>
							<dl class="layui-nav-child">
								<dd id="C001" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>运营</a>
								</dd>
								<dd id="C002" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>设计</a>
								</dd>
								<dd id="C003" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>技术</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item ">
							<a class="title" href="javascript:;"><i class="layui-icon">&#xe7a0;</i>市场部</a>
							<dl class="layui-nav-child">
								<dd id="D001" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>建立分支机构</a>
								</dd>
								<dd id="D002" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>市场监督</a>
								</dd>
								<dd id="D003" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>市场数据考核</a>
								</dd>
								<dd id="D004" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>线下拍卖</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="title" href="javascript:;"><i class="layui-icon">&#xe7a0;</i>销售部</a>
							<dl class="layui-nav-child">
								<dd id="A001" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>公告信息</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="title" href="javascript:;"><i class="layui-icon">&#xe7a0;</i>财务部</a>
							<dl class="layui-nav-child">
								<dd id="A001" name="inforList.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>公告信息</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="title" href="javascript:;"><i class="layui-icon">&#xe7a0;</i>数据统计</a>
							<dl class="layui-nav-child">
								<dd id="g001" name="carData.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>车辆数据</a>
								</dd>
								<dd id="g002" name="sellData.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>销量数据</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="title" href="javascript:;"><i class="layui-icon">&#xe7a0;</i>账号管理</a>
							<dl class="layui-nav-child">
								<dd id="H001" name="account.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>账号管理</a>
								</dd>
								<dd id="H002" name="department.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>部门管理</a>
								</dd>
								<dd id="H003" name="role.html">
									<a href="javascript:;"><i class="layui-icon">&#xe638;</i>岗位管理</a>
								</dd>
							</dl>
						</li>
					</ul>
				</div>
			</div>
			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div class="layui-tab" lay-filter="tab-switch" lay-allowClose="true">
					<ul class="layui-tab-title">
						<li class="layui-this"><i class="layui-icon pr5">&#xe68e;</i>首页</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show" >
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>您好，欢迎使用聚车拍管理系统</legend>
							</fieldset>

						</div>
					</div>
				</div>
			</div>
			<div class="layui-footer" style="border-top:1px solid #ccc;">
				<!-- 底部固定区域 -->
				© 聚车拍（北京）有限公司
			</div>
		</div>
		<script src="assets/js/jquery-1.8.1.min.js"></script>
		<script src="assets/layui/layui.js"></script>
		<script src="assets/js/all.js"></script>
		<script type="text/javascript">
			layui.use(['element','layer'], function() {
				var element = layui.element,
					$ = layui.$,
					layer = layui.layer;
				
				$("#changepsw").click(function(){
					var index = layer.open({
						type:2,
						title:"修改密码",
						area:['450px','350px'],
						content:'changepsw.html'
					})
				});
				
				//隐藏左侧菜单
				var i = 0;
				$("#navSorH").click(function() {
					if(i == 0) {
						$(".layui-side").animate({
							width: "0"
						});
						$(".layui-body").animate({
							left: "0"
						});
						$(".layui-layout-admin .layui-footer").animate({
							left:"0"
						});
						$(this).html('<i class="layui-icon">&#xe65b;</i>');
						i++;
					} else {
						$(".layui-side").animate({
							width: "200px"
						});
						$(".layui-body").animate({
							left: "200px"
						});
						$(".layui-layout-admin .layui-footer").animate({
							left:"200px"
						});
						$(this).html('<i class="layui-icon">&#xe65a;</i>');
						i--;
					}
				});
				//监听左侧菜单点击
				element.on('nav(left-nav)', function(elem) {
					addTab(elem[0].innerHTML, elem[0].attributes[1].nodeValue, elem[0].id);
				});
				//监听tab选项卡切换
				element.on('tab(tab-switch)', function(data) {
					if(data.elem.context.attributes != undefined) {
						var id = data.elem.context.attributes[0].nodeValue;
						layui.each($(".layui-nav-child"), function() {
							$(this).find("dd").removeClass("layui-this");
						});
						$("#" + id).attr("class", "layui-this");
					}
				});
				
				/**
				 * 新增tab选项卡，如果已经存在则打开已经存在的，不存在则新增
				 * @param tabTitle 选项卡标题名称
				 * @param tabUrl 选项卡链接的页面URL
				 * @param tabId 选项卡id
				 */
			    function addTab(tabTitle, tabUrl, tabId) {
					if($('.layui-tab-title li[lay-id=' + tabId + ']').length > 0) {
						element.tabChange('tab-switch', tabId);
						//点击刷新
						var tabIndex = $('.layui-tab-title li[lay-id=' + tabId + ']').index();
						$("div.layui-tab-content > div").eq(tabIndex).children("iframe")[0].contentWindow.location.reload();
						$("div.layui-tab-content > div").eq(tabIndex).children("iframe")[0].contentWindow.location=tabUrl;
					} else {
						element.tabAdd('tab-switch', {
							title: tabTitle,
							content: '<iframe src=' + tabUrl + ' width="100%" style="min-height: 800px;" frameborder="0" scrolling="auto" onload="setIframeHeight(this)"></iframe>' // 选项卡内容，支持传入html
								,
							id: tabId //选项卡标题的lay-id属性值
						});
						element.tabChange('tab-switch', tabId); //切换到新增的tab上
						
					}
				}
				
				
			});	
			/**
			 * ifrme自适应页面高度，需要设定min-height
			 * @param iframe
			 */
			function setIframeHeight(iframe) {
				if(iframe) {
					var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
					if(iframeWin.document.body) {
						iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
					}
				}
			};
		</script>

	</body>

</html>